<template>
    <div class="operation-container">
        <el-card shadow="never">
            <template #header>
                <div class="e-page" style="font-size: 15px;white-space: nowrap">
                    <el-row>
                        <el-col :span="5" style="padding-left: 10px">
                            <tooltip v-model="dbInfo.dbType" placeholder="请选择目标表信息" border />
                        </el-col>
                        <el-col :span="5" style="padding-left: 5px">
                            <tooltip v-model="dbInfo.dbName" placeholder="请选择目标表信息" border />
                        </el-col>
                        <el-col :span="14" style="display: flex;justify-content: flex-end;align-items: center;">
                            <span style="font-size: calc(var(--font-size) - 2px);">{{ "已输入:" + (operation.sql ?
                                operation.sql.length : 0) }}</span>
                        </el-col>
                    </el-row>
                </div>
            </template>
            <aceEditor v-model="operation.sql" ref="editor" :options="{ lang: 'sql' }" />
        </el-card>
    </div>
</template>

<script setup>
let operation = $ref({ sql: "", dbSequence: "" })

const dbInfo = $ref({ dbType: "", dbName: "" })
const save = () => {
    return operation
}
const dbChange = (dbSequence) => {
    operation.dbSequence = dbSequence
}
const fill = (data) => {
    operation = data
}

watchEffect(() => {
    if (operation.dbSequence && Object.keys(db).length > 0) {
        for (let key in db) {
            for (let cItem of db[key]) {
                if (cItem.sequence === operation.dbSequence) {
                    dbInfo.dbType = key
                    dbInfo.dbName = cItem.name
                    break
                }
            }
        }
    }
})

let db = $ref({})

const fillDbInfo = (_db) => {
    db = _db
}

defineExpose({ save, dbChange, fill, fillDbInfo })
</script>

<style scoped>
:deep(.el-card__header) {
    padding: 5px 10px;
}

:deep(.el-card__body .el-form-item) {
    height: 35px;
}

:deep(.el-card__body) {
    padding: 0;
    height: calc(100% - 11px - var(--font-size) * 2);
}

.operation-container,
:deep(.el-card) {
    height: 100%;
}

:deep(.el-card) {
    border: 0 !important;
}
</style>
